<template>
    <div class="nightly-container">
      <!-- 上传区域 -->
      <div class="upload-section" v-if="!showChat">
        <h1 class="title">灵枢热链</h1>
        <p class="subtitle">你的数据分析助手</p>
  
        <div 
          class="drop-zone"
          @dragover.prevent="dragover = true"
          @dragleave="dragover = false"
          @drop.prevent="handleDrop"
          :class="{ 'active': dragover }"
        >
          <div class="upload-icon">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none">
              <path d="M7 10V14H17V10H19V14C19 15.1 18.1 16 17 16H7C5.9 16 5 15.1 5 14V10H7Z" fill="#5C6BC0"/>
              <path d="M13 11.5V16H11V11.5H8L12 7L16 11.5H13Z" fill="#5C6BC0"/>
            </svg>
          </div>
          <p class="prompt-text">拖拽文件夹到此处</p>
          <p class="hint-text">支持 .config / .json / .yaml / .xlsx 等格式</p>
        </div>
  
        <!-- 上传进度 -->
        <div v-if="uploading" class="progress-container">
          <div class="progress-info">
            <span>{{ currentFileName }}</span>
            <span>{{ progress }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
          </div>
  
          <!-- 数据库更新模拟 -->
          <div v-if="dbUpdating" class="db-update">
            <div class="db-progress">
              <div class="db-fill" :style="{ width: dbProgress + '%' }"></div>
            </div>
            <p class="db-message">数据库同步中... {{ dbProgress }}%</p>
          </div>
        </div>
  
        <!-- 完成提示 -->
        <div v-if="uploadComplete" class="completion-message">
          <div class="success-icon">✓</div>
          <h3>数据库已更新，随时准备回答您的问题</h3>
          <button class="start-chat-btn" @click="showChat = true">
            进入智能问答
          </button>
        </div>
      </div>
  
      <!-- DeepSeek iframe -->
      <div v-else class="chat-container">
        <iframe
          src="https://www.deepseek.com/"
          frameborder="0"
          class="deepseek-iframe"
          @load="iframeLoaded = true"
        ></iframe>
        <div v-if="!iframeLoaded" class="iframe-loading">
          正在加载智能助手...
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'DataUpload',
    data() {
      return {
        version: "1.0.0",
        dragover: false,
        uploading: false,
        uploadComplete: false,
        dbUpdating: false,
        progress: 0,
        dbProgress: 0,
        currentFileName: '',
        showChat: false,
        iframeLoaded: false
      }
    },
    methods: {
      handleDrop(e) {
        this.dragover = false
        const files = e.dataTransfer.files
        if (files.length) {
          this.startUpload(files[0])
        }
      },
      startUpload(file) {
        this.uploading = true
        this.currentFileName = file.name
        this.progress = 0
        
        // 模拟上传进度
        const uploadInterval = setInterval(() => {
          this.progress += Math.floor(Math.random() * 10) + 15
          if (this.progress >= 100) {
            clearInterval(uploadInterval)
            this.progress = 100
            this.startDbUpdate()
          }
        }, 300)
      },
      startDbUpdate() {
        this.dbUpdating = true
        this.dbProgress = 0
        
        // 模拟数据库更新
        const dbInterval = setInterval(() => {
          this.dbProgress += Math.floor(Math.random() * 5) + 13
          if (this.dbProgress >= 100) {
            clearInterval(dbInterval)
            this.dbProgress = 100
            setTimeout(() => {
              this.uploadComplete = true
              this.uploading = false
              this.dbUpdating = false
            }, 500)
          }
        }, 400)
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .nightly-container {
    height: 100vh;
    background: #0f0f1a;
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
  }
  
  .upload-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  
  .title {
    font-size: 2.5rem;
    color: #5C6BC0;
    margin-bottom: 0.5rem;
    font-weight: 300;
  }
  
  .subtitle {
    color: #7E8AA8;
    margin-bottom: 3rem;
  }
  
  .drop-zone {
    border: 2px dashed #2D3748;
    border-radius: 12px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    background: rgba(30, 30, 46, 0.5);
  
    &.active {
      border-color: #5C6BC0;
      background: rgba(92, 107, 192, 0.1);
    }
  }
  
  .upload-icon {
    margin-bottom: 1.5rem;
    opacity: 0.8;
  }
  
  .prompt-text {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #B0BEC5;
  }
  
  .browse-link {
    color: #5C6BC0;
    cursor: pointer;
    text-decoration: underline;
  }
  
  .hint-text {
    font-size: 0.9rem;
    color: #6B7280;
  }
  
  .progress-container {
    background: #1A1A2E;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
  }
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #A0AEC0;
  }
  
  .progress-bar {
    height: 8px;
    background: #2D3748;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
  }
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5C6BC0, #7986CB);
    transition: width 0.3s ease;
  }
  
  .db-update {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #2D3748;
  }
  
  .db-progress {
    height: 6px;
    background: #2D3748;
    border-radius: 3px;
    overflow: hidden;
  }
  
  .db-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
    transition: width 0.4s ease;
  }
  
  .db-message {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #A0AEC0;
    text-align: center;
  }
  
  .completion-message {
    margin-top: 3rem;
    animation: fadeIn 0.5s ease;
  }
  
  .success-icon {
    font-size: 4rem;
    color: #4CAF50;
    margin-bottom: 1.5rem;
    animation: bounce 0.5s ease;
  }
  
  .start-chat-btn {
    background: #5C6BC0;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    margin-top: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
  
    &:hover {
      background: #7986CB;
      transform: translateY(-2px);
    }
  }
  
  .chat-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .chat-header {
    background: #1A1A2E;
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #2D3748;
  }
  
  .back-btn {
    background: none;
    border: none;
    color: #5C6BC0;
    margin-right: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
  }
  
  .deepseek-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #0f0f1a;
  }
  
  .iframe-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #7E8AA8;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }
  </style>